import React, { useEffect, useState } from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import Home from '../../views/sandbox/home/Home';
import Nopermission from '../../views/sandbox/nopermission/Nopermission';
import RightList from '../../views/sandbox/right-manage/RightList';
import RoleList from '../../views/sandbox/right-manage/RoleList';
import UserList from '../../views/sandbox/user-manage/UserList';
import NewsAdd from '../../views/sandbox/news-manage/NewsAdd';
import NewsDraft from '../../views/sandbox/news-manage/NewsDraft';
import NewsCategory from '../../views/sandbox/news-manage/NewsCategory';
import Audit from '../../views/sandbox/audit-manage/Audit';
import AuditList from '../../views/sandbox/audit-manage/AuditList';
import Unpublished from '../../views/sandbox/publish-manage/Unpublished';
import Published from '../../views/sandbox/publish-manage/Published';
import Sunset from '../../views/sandbox/publish-manage/Sunset';
import NewsPreview from '../../views/sandbox/news-manage/NewsPreview';
import NewsUpdate from '../../views/sandbox/news-manage/NewsUpdate';
import API from '../../util/api';
import { Spin } from 'antd';
import {connect} from 'react-redux'

const LocalRouterMap = {
    "/home":Home,
    "/user-manage/list":UserList,
    "/right-manage/role/list":RoleList,
    "/right-manage/right/list":RightList,
    "/news-manage/add":NewsAdd,
    "/news-manage/draft":NewsDraft,
    "/news-manage/category":NewsCategory,
    "/news-manage/preview/:id":NewsPreview,
    "/news-manage/update/:id":NewsUpdate,
    "/audit-manage/audit":Audit,
    "/audit-manage/list":AuditList,
    "/publish-manage/unpublished":Unpublished,
    "/publish-manage/published":Published,
    "/publish-manage/sunset":Sunset
}

function NewsRouter (props) {
    const [BackRouteList,setBackRouteList] = useState([]);

    useEffect(() => {
        Promise.all([
            API.rights(),
            API.children()
        ]).then(res => {
            setBackRouteList([...res[0].data,...res[1].data]);
        })
    }, []);

    const {role:{rights}} = JSON.parse(localStorage.getItem("token")); //多重解构

    const checkRoute = (item) => {
        return LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson);
    }
    const checkUserPermisssion = (item) => {
        return rights.includes(item.key);
    }
    return (
        <Spin size="large" spinning={props.isLoading}>
            <Switch>
                {
                    BackRouteList.map(item => {
                        if (checkRoute(item) && checkUserPermisssion(item)) {
                            return <Route path={item.key} key={item.key} component={LocalRouterMap[item.key]} exact></Route>
                        }
                        return null;
                    })
                }
            
                {/* 如果上面的Route都匹配不上，那么就走最后的Redierct重定向to的路由,严格匹配 */}
                
                <Redirect from="/" to="/home" exact={true}></Redirect>
                {
                    BackRouteList.length > 0 && <Route path="*" component={Nopermission}></Route>
                }
                
            </Switch>
    </Spin>
    )
}


// const mapStateToProps = ({LoadingReducer:{isLoading}})=>({
//     isLoading
//   })

const mapStateToProps = (state) => {
    // console.log(state)   //{CollApsedReducer: {…}, LoadingReducer: {…}}
    return {
        isLoading:state.LoadingReducer.isLoading   //将state里的状态isLoading转为属性props里的isLoading
    }
}

export default connect(mapStateToProps)(NewsRouter);